<template>
  <div>
    <h2>获取所有学生信息</h2>
    <div>
      <select v-model="type" class="typeSel">
        <option value="name">姓名</option>
        <option value="age">年龄</option>
        <option value="gender">性别</option>
      </select>
      <input type="text" v-model="value" class="typeval" />
      <button @click="searchStduent" class="searchBtn">搜索</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>专业</th>
          <th>头像</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in students" :key="item._id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.subjectsId ? item.subjectsId.name : "暂无专业" }}</td>
          <td>
            <img
              v-if="item.imagePath"
              :src="item.imagePath"
              alt=""
              :class="['avatar']"
            />
            <img v-else :src="defaultImg" alt="" :class="['avatar']" />
          </td>
          <td>
            <button class="delBtn" @click="delStudentApi(item._id)">删除</button>
            <button class="searchBtn" @click="findByIdApi(item._id)">查看</button>
          </td>
        </tr>
      </tbody>
    </table>
    <hr>
    <StudentUpdate v-show="showUpdateCom" :student="updateStudent"></StudentUpdate>
  </div>
</template>

<script>
//导入axios
import axios from "axios";
import StudentUpdate from '@/views/StudentUpdate.vue'
export default {
  data() {
    return {
      students: [],
      defaultImg: require("@/assets/logo.png"),
      type: "",
      value: "",
      showUpdateCom:false,
      updateStudent:{}
    };
  },
  computed: {
    notemptyStudents:{
      handler() {
       return this.students.filter((item) => item.name);
     },
    }
  },
  //created中一般都是用来向网络发送请求的
  methods: {
    async getAllStudents() {
      /*
            axios的参数是一个对象,在对象中定义了axios相关配置,具体该对象中常用的属性
            method:设置请求方式
           */
      let {
        data: {
          data: { rows },
        },
      } = await axios({
        method: "GET",
        url: "http://47.98.128.191:3000/students/getStudents",
      });
      console.log(rows);
      this.students = rows;
    },
    async searchStduent() {
      //标准的axios的写法
      //    let {data:{data:{rows}}}=await axios({
      //      method:'GET',
      //      url:'http://47.98.128.191:3000/students/getStudents',
      //      params:{
      //         type:this.type,
      //         value:this.value,
      //      }
      //    })
      //    this.students=rows
      //axios的简写形式
      /*
            axios.get(参数1,参数2)
            参数1：请求的url
            参数2：配置对象
               parmas:GET请求的参数
        */
      let {
        data: {
          data: { rows },
        },
      } = await axios.get("http://47.98.128.191:3000/students/getStudents", {
        params: {
          type: this.type,
          value: this.value,
        },
      });
      this.students = rows;
    },
    async delStudentApi(id){
      //标准删除的写法
      // let {data:{code,message}}=await axios({
      //   method:'DELETE',
      //   url:'http://47.98.128.191:3000/students/deleteStudents',
      //   data:{
      //     _id:id
      //   }
      // })
      // if(code){
      //   alert(message)
      //   this.getAllStudents()
      // }
      let {data:{code,message}}=await axios.delete('http://47.98.128.191:3000/students/deleteStudents',{
        data:{
          _id:id
        }
      })
      if(code){
        alert(message)
        this.getAllStudents()
      }
      
    },
    async findByIdApi(_id){
      //显示修改学生的组件
      this.showUpdateCom=true
      const {data:{data}}=await axios.get('http://47.98.128.191:3000/students/getStudentsById',{params:{_id}})
      this.updateStudent=data
      //获取subjectsId
      //console.log('专业id',data.subjectsId);
      //通过subjectsid，将班级列表查询出来
      const res=await axios.get('http://47.98.128.191:3000/classes/getClassesBySubjectsId',{params:{subjectsId:data.subjectsId}})
      //console.log(res.data.data.rows);
      localStorage.setItem('classes',JSON.stringify(res.data.data.rows))
    }
  },
  created() {
    this.getAllStudents();
  },
  components:{StudentUpdate}
  
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  width: 900px;
}
td,
th {
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.typeSel {
  height: 35px;
  font-size: 14px;
  margin: 0 5px 1px;
}
.typeval {
  width: 200px;
  height: 30px;
  outline: none;
  padding: 0px 5px;
  margin: 0 5px 1px;
}
.searchBtn {
  width: 100px;
  height: 35px;
  border: none;
  background-color: skyblue;
  color: white;
  margin: 0 5px 5px;
}
.delBtn{
  width: 100px;
  height: 35px;
  border: none;
  background-color:tomato;
  color: white;
  margin: 0 5px 5px;
}
</style>